import { Input, Select, Cascader } from 'antd'
import { memo, useContext } from 'react'
import { useRecoilValue } from 'recoil'
import { reviewContext } from '../../_context'
import { isNullArray } from '@/utils'
import styles from './index.module.less'
import IconSvg from '@/components/IconSvg'
import { theQuarterData } from '@/store/user'
import { dictValues } from '@/store/dicts'

export default memo(() => {
  const quarterData = useRecoilValue(theQuarterData)
  const dictValuesList = useRecoilValue(dictValues)

  const {
    areaList,
    task,
    area,
    hospitalName,
    status,
    handleHospitalChange,
    getTables,
    handleTaskChange,
    handleAreaChange,
    handleStatusChange,
  } = useContext(reviewContext)

  return (
    <div className={styles.search}>
      <Cascader
        className={styles.width200}
        value={task}
        onChange={(e) => handleTaskChange(e)}
        displayRender={(value) => value.join('')}
        placeholder={'请选择任务'}
        options={quarterData}
        allowClear={false}
      />
      <Select
        className={styles.width200}
        value={status}
        onChange={(e) => handleStatusChange(e)}
        options={[{ label: '全部', value: '' }, ...dictValuesList.apply_status]}
        placeholder='请选择状态'
      />
      {/* <Select
        value={area}
        className={styles.width200}
        onChange={(e) => handleAreaChange(e)}
        key={'value'}
        options={[{ value: '', label: '全部' }, ...areaList]}
        placeholder={'请选择地区'}
      /> */}
      {/* <Input
        value={hospitalName}
        suffix={<IconSvg name='search' onClick={getTables} />}
        className={styles.width200}
        placeholder='搜索医院名称'
        onChange={(e) => handleHospitalChange(e)}
        onPressEnter={getTables}
      /> */}
    </div>
  )
})
